{extend name='common/common' /}

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <!-- Panel Other -->
    <div class="ibox float-e-margins col-sm-5">
        <div class="ibox-title">
            <h5>客户属性</h5>
        </div>
        <div class="ibox-content">
            <div class="form-group">
                {if authCheck('department/departadd')}
                <button class="btn btn-outline btn-primary" type="button" id="addAttr">添加顶级属性</button>
                {/if}
                <button class="btn btn-outline btn-success" type="button" onclick="window.location.reload();">刷新</button>
            </div>

            <div class="ibox-content">
                <ul id="tree"></ul>
            </div>
        </div>
    </div>
</div>


<!-- 添加顶级属性 -->
<div class="ibox-content" id="node_box" style="display: none">
    <form class="form-horizontal m-t" method="post" action="{:url('Memberattr/attrAdd')}" id="addForm">
        <input type="hidden" class="form-control" value="0" name="pid" id="pid">
        <div class="form-group">
            <label class="col-sm-3 control-label">属性名称：</label>
            <div class="input-group col-sm-7">
                <input id="attr_value" type="text" class="form-control" name="attr_value" required="" aria-required="true">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">所属属性：</label>
            <div class="input-group col-sm-7">
                <input id="attr_pid" type="text" class="form-control" value="顶级属性" disabled>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-4 col-sm-offset-8">
                <button class="btn btn-primary" type="submit">提交</button>
            </div>
        </div>
    </form>
</div>
<!-- 添加子属性 -->


<!-- 编辑属性 -->
<div class="ibox-content" id="edit_box" style="display: none">
    <form class="form-horizontal m-t" method="post" action="{:url('Memberattr/editAttr')}" id="editForm">
        <input type="hidden" name="attr_id" id="attr_id"/>
        <div class="form-group">
            <label class="col-sm-3 control-label">属性名称：</label>
            <div class="input-group col-sm-7">
                <input id="e_attr_value" type="text" class="form-control" name="e_attr_value" required="" aria-required="true">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-4 col-sm-offset-8">
                <button class="btn btn-primary" type="submit">提交</button>
            </div>
        </div>
    </form>
</div>
<!-- 添加添加属性 -->


<!-- 属性操作询问层 -->
    <!-- 增删改 -->
<div class="ibox-content" id="ask_box" style="display: none">
    <div class="form-horizontal m-t">
        <div class="form-group" style="text-align: center">
            {if authCheck('department/departadd')}
            <button class="btn btn-outline btn-success addMemAttr" type="button">
                <i class="fa fa-plus"></i>
                添加子属性
            </button>
            {/if}
            {if authCheck('department/departedit')}
            <button class="btn btn-outline btn-primary editMemAttr" type="button">
                <i class="fa fa-edit"></i>
                编辑属性
            </button>
            {/if}
            {if authCheck('department/departdel')}
            <button class="btn btn-outline btn-danger delMemAttr" type="button">
                <i class="fa fa-trash-o"></i>
                删除属性
            </button>
            {/if}
        </div>
    </div>
</div>

    <!-- 删改 -->
<div class="ibox-content" id="ask_box_1" style="display: none">
    <div class="form-horizontal m-t">
        <div class="form-group" style="text-align: center">
            {if authCheck('department/departedit')}
            <button class="btn btn-outline btn-primary editMemAttr" type="button">
                <i class="fa fa-edit"></i>
                编辑属性
            </button>
            {/if}
            {if authCheck('department/departdel')}
            <button class="btn btn-outline btn-danger delMemAttr" type="button">
                <i class="fa fa-trash-o"></i>
                删除属性
            </button>
            {/if}
        </div>
    </div>
</div>

    <!--  增 -->
<div class="ibox-content" id="ask_box_2" style="display: none">
    <div class="form-horizontal m-t">
        <div class="form-group" style="text-align: center">
            {if authCheck('department/departadd')}
            <button class="btn btn-outline btn-success addMemAttr" type="button">
                <i class="fa fa-plus"></i>
                添加子属性
            </button>
            {/if}
        </div>
    </div>
</div>
<!-- 部门操作询问层 -->
{/block}


{block name="script"}

<script type="text/javascript">
    var Attr_del_url = "{:url('Memberattr/delAttr')}";
    var box;
    var nowNode = null;

    $(function(){

        getTree();
        //添加顶级属性
        $("#addAttr").click(function(){
            $("#pid").val(0);
            $("#show_pid").val('顶级属性');
            layui.use('layer', function(){
                box = layer.open({
                    type: 1,
                    title: '添加顶级属性',
                    anim: 2,
                    skin: 'layui-layer-molv', //加上边框
                    area: ['620px', '440px'], //宽高
                    content: $('#node_box')
                });
            });
        });
        //添加子属性
        $(".addMemAttr").click(function(){
            layer.close(box);
            $('#attr_pid').val(nowNode.name);
            $('#pid').val(nowNode.id);
            layui.use('layer', function(){
                box = layer.open({
                    type: 1,
                    title: '添加 ' + nowNode.name + ' 的子菜单',
                    anim: 2,
                    skin: 'layui-layer-molv', //加上边框
                    area: ['620px', '440px'], //宽高
                    content: $('#node_box')
                });
            });
        });

        //编辑子属性
        $(".editMemAttr").click(function(){
            layer.close(box);
            $("#attr_id").val(nowNode.id);
            $("#e_attr_value").val(nowNode.name);

            layui.use('layer', function(){
                box = layer.open({
                    type: 1,
                    title: '编辑  ' + nowNode.name + '  属性',
                    anim: 2,
                    skin: 'layui-layer-molv', //加上边框
                    area: ['620px', '400px'], //宽高
                    content: $('#edit_box')
                });
            });
        });

        //删除属性
        $(".delMemAttr").click(function(){
            layer.close(box);
            if(nowNode.children.length > 0){
                layer.alert('该属性下有子属性，不可删除', {icon:2, title:'失败提示', closeBtn:0, anim:6});
                return false;
            }
            //询问框
            var index = layer.confirm('确定要删除' + nowNode.name + '？', {
                icon: 3,
                title: '友情提示',
                btn: ['确定','取消'] //按钮
            }, function(){
                $.getJSON(Attr_del_url, {id : nowNode.id},function(res){
                    layer.close( index );
                    if( 1 == res.code ){
                        $("#tree").empty();
                        getTree();
                    }else if(111 == res.code){
                        window.location.reload();
                    }else{
                        layer.alert(res.msg, {icon:2});
                    }
                });
            }, function(){

            });
        });

        // 添加属性
        var options = {
            beforeSubmit:showStart,
            success:showSuccess
        };

        $('#addForm').submit(function(){
            $(this).ajaxSubmit(options);
            return false;
        });

        // 编辑部门
        $('#editForm').submit(function(){
            $(this).ajaxSubmit(options);
            return false;
        });
    });

    function getTree(){
        layui.use(['tree', 'layer'], function(){
            var layer = layui.layer;

            $.getJSON("{:url('Memberattr/index')}", function(res){
                if(111 == res.code){
                    window.location.reload();
                }
                layui.tree({
                    elem: '#tree'
                    ,nodes: res.data
                    ,click: function(node){
//                        alert(typeof(node.id));
                        if (node.id != 1 && node.id != 5 && node.id != 10){
                            if (node.pid == 0){
                                layui.use('layer', function(){
                                    box = layer.open({
                                        type: 1,
                                        title: '您要如何操作该属性',
                                        anim: 2,
                                        skin: 'layui-layer-molv', //加上边框
                                        area: ['400px', '150px'], //宽高
                                        content: $('#ask_box')
                                    });
                                });
                            }else{
                                layui.use('layer', function(){
                                    box = layer.open({
                                        type: 1,
                                        title: '您要如何操作该属性',
                                        anim: 2,
                                        skin: 'layui-layer-molv', //加上边框
                                        area: ['400px', '150px'], //宽高
                                        content: $('#ask_box_1')
                                    });
                                });
                            }
                        }else{
                            layui.use('layer', function(){
                                box = layer.open({
                                    type: 1,
                                    title: '您要如何操作该属性',
                                    anim: 2,
                                    skin: 'layui-layer-molv', //加上边框
                                    area: ['400px', '150px'], //宽高
                                    content: $('#ask_box_2')
                                });
                            });
                        }
                        nowNode = node;
                    }
                });
            });
        });
    }

    // 添加相关的 js
    var index = '';
    function showStart(){
        index = layer.load(0, {shade: false});
        return true;
    }

    function showSuccess(res){
        layui.use('layer', function(){
            var layer = layui.layer;

            layer.ready(function(){
                layer.close( index );
                layer.close( box );
                if( 1 == res.code ){
                    $("#depart_name").val('');
                    $("#tree").empty();
                    getTree();
                }else if(111 == res.code){
                    window.location.reload();
                }else{
                    layer.alert(res.msg, {icon:2});
                }
            });
        });
    }

</script>
{/block}
